<template>
  <div class="cusList">
    <el-form :model="cusForm" label-width="72px" ref="cusRefs" class="cusCls">
      <el-row :gutter="20">
        <el-col v-bind="grid">
          <el-form-item label="搜索客户：" class="search-select">
            <el-input v-model="cusForm.keyword" placeholder="请输入用户名或手机号" size="small" clearable>
              <el-button slot="append" icon="el-icon-search" size="small" @click="getList('1')"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      v-loading="tableLoading"
      :data="tableList"
      style="width: 100%;"
      size="mini"
      class="table"
    >
      <el-table-column prop="id" label="ID" align="center" min-width="50"></el-table-column>
      <el-table-column label="头像" min-width="60">
        <template slot-scope="{ row }">
          <div class="taoBox_img" v-viewer>
            <img v-lazy="$uploadURL(row.headImage)" :alt="$uploadURL(row.headImage)">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户信息" min-width="130">
        <template slot-scope="{ row }">
          <div>
            <span>昵称：{{ row.nickName }}</span><br/>
            <span>姓名：{{ row.realName }}</span><br/>
            <span>电话：{{ row.mobile }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" min-width="100">
        <template slot-scope="{ row }">
          <span>{{ row.gender | genderFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地区" align="center" min-width="250"></el-table-column>
      <el-table-column prop="registerFrom" label="用户类型" align="center" min-width="120"></el-table-column>
      <el-table-column label="用户状态" align="center" min-width="100">
        <template slot-scope="{ row }">
          <span>{{ row.status | userStateFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center" min-width="150">
        <template slot-scope="{ row }">
          <span>{{ row.addLoginDate | uctTimeFileter }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="cusBox">
      <pagination
        v-show="pagination.total > 0"
        :total="pagination.total"
        :page.sync="pagination.page"
        :limit.sync="pagination.limit"
        :page-sizes="[10, 20, 30, 50]"
        @pagination="replyChange"
      />
    </div>
  </div>
</template>

<script>
  import { getAgentClientListApi } from '@/api/agent';

  export default {
    name: 'Index',
    props: {
      id: {
        type: [String, Number],
        default: 0
      }
    },
    data() {
      return {
        grid: {
          xl: 10,
          lg: 10,
          md: 12,
          sm: 12,
          xs: 24
        },
        tableLoading: false,
        tableList: [],
        cusForm: {
          keyword: ''
        },
        pagination: {
          page: 1,
          limit: 10,
          total: 0
        }
      };
    },
    filters: {
      userStateFilter(val) {
        if (val == 0) {
          return '开启';
        } else if (val == 1) {
          return '关闭'
        };
      }
    },
    created() {
      this.getList();
    },
    methods: {
      /**
       * 获取客户列表
       */
      getList() {
        this.$set(this, 'tableLoading', true);
        getAgentClientListApi(this.id, {
          pageNumber: this.pagination.page,
          pageSize: this.pagination.limit,
          orderBy: 'Id desc',
          keyword: this.cusForm.keyword
        }).then(res => {
          this.$set(this, 'tableList', res.data);
          this.$set(this.pagination, 'total', res.head.totalCount);
          this.$set(this, 'tableLoading', false);
        }).catch(() => {
          this.$set(this, 'tableList', []);
          this.$set(this.pagination, 'total', 0);
          this.$set(this, 'tableLoading', false);
        });
      },
      replyChange(reply) {
        this.$set(this.pagination, 'page', reply.page);
        this.$set(this.pagination, 'limit', reply.limit);
        this.getList();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cusList {
    .taoBox_img {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cusBox {
      ::v-deep .pagination-container {
        margin-top: 25px;
        padding: 0 0;
        .el-pagination {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
</style>
